<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
			<link href="../css/together.css" rel="stylesheet" />

		<style type="text/css">
			.ws_cover{
				width:7.0rem; 
				height:8.0rem; 
				border:1px solid #ccc; 
				margin-top:1rem;
			}
			.ws_radio{
				width: 80%; 
				position:relative;
			}
			.ws_books_btn{
				width:80%; 
				margin:2rem auto 0.5rem;
			}
			.ws_name{
				width: 80%;
			}
			
			.fmdivmain{
				width: 13.125em;
				height: 18.5625em;
				/*width: calc(90vw);
				height: calc(90vw * 1.414);*/
				margin: 0.5em auto;
				position: relative;
				
				background-color: white;
				overflow: hidden;
					
			}
			
			.ws_name{
				margin-top: 0;
			}
			.flex1{
				padding-top:1rem ;
			}
			.fmimgdiv{
				width: 100%;
				margin: 0;
				padding: 0;
				border: 0;
			}
			.fmimgdiv>img{
				width: 100%;
			}
			.fmdata{
				width: 100%;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
			}
			.logodiv{
				position: absolute;
				bottom: 2%;
				width: 100%;
				font-size: 0.3em;
				text-align: center;
			}
			.jjdiv{
				width: 100%;
				position: absolute;
				bottom: 10%;
				font-size:0.2em;
				font-family: '微软雅黑';
				text-align: center;
				padding: 0.5em 0;
			}
			.smdiv{
				width: 100%; 
				font-size: 1em;
				font-family: '微软雅黑';
				font-weight: 600;
				text-align: center;
				padding:0 0 0.5em 0;
			}
			
			.zzdiv{
				width: 100%; 
				font-size:0.2em;
				font-family: '微软雅黑';
				text-align: center;
				padding: 0.5em 0;
			}
			.mui-content{
				overflow: hidden;
			}
			#down{ width:500px; height:300px;}
			
		</style>
	</head>

	<body>
	
		<header class="mui-bar mui-bar-nav m_barC">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">新建书籍</h1>
		</header>
		<div class="mui-content">
			<div class="fmdivmain"  id="fmdivmain">
				
					<div class="fmimgdiv">
						<!--
	                    	作者：592176224@qq.com
	                    	时间：2019-01-21
	                    	描述：
						<img src="http://ws.rovine.cn/uploads/20190118/7b7074182a2da8a1fea6e82b0ba01df9.png" />
	                    -->
	                    <img src="img/fm01.png"/>
					</div>
					<div class="fmdata">
							<div class="smdiv" id="smid">
								了不起的平凡
							</div>
							<div class="zzdiv" id="zzid">
								
							</div>
							<div class="jjdiv" id="jjid">
								标语
							</div>
					</div>
					<div class="logodiv">
							logo
					</div>
				
			</div>	
			<div class="">
				<!--
                	作者：592176224@qq.com
                	时间：2019-01-21
                	描述：
				<div class="flex1">
					<div class="ws_cover ws_100">
						<img id="fmimgid1" src="../images/books_hea.png" alt="">
					</div>
				</div>
                -->
				
				
				
				<div class="flex1">
					<div class="ws_name">
					   <span id="">书名:</span>	
					   <input id="bookname" value="" maxlength="12" class="mui-input-clear" placeholder="了不起的平凡(点击修改)" type="text">
					</div>
					
				</div>
				<div class="flex1">
					<div class="ws_name">
					   <span id="">标语:</span>	
					   <input id="bookjj" value="" maxlength="25"  class="mui-input-clear" placeholder="选填" type="text">
					</div>
					
				</div>
				
				
				<!--<div class="ws_permissions ">
					<span class="ws_power">私密</span> 
					
					<div class="mui-switch mui-switch-mini ws_books_qbtn" id="mySwitch">
					  <div class="mui-switch-handle"></div>
					</div>
					<span class="ws_power">公开</span> 
					<span class="private ">(仅邀请的成员可见)</span>  
					<span class="open hide">(对所有人可见)</span>
					|<div class="mui-input-row mui-radio mui-left flex1" >
						<div class="ws_radio">
							<label for="public">公开(对所有人可见)</label>
							<input name="radio1" id="public" type="radio">
						</div>
					</div>
					<div class="mui-input-row mui-radio mui-left flex1">
						<div class="ws_radio">
							<label for="private">私密(仅邀请的人可见)</label>
							<input name="radio1" id="private" type="radio">
						</div>
					</div>|
				</div>-->

				<div class="ws_books_btn flex1" >
					<a id="reg" onclick="goaddcent()">新建书籍</a>
					<!--
                    	作者：592176224@qq.com
                    	时间：2019-01-18
                    	描述：
                    	<a id="Invitation" >邀请好友</a>
                    -->
				</div>
			</div>
			
			<!-- <img id="testimgid" src=""/> -->
				
		</div>
		<div id="down"> <img id="down1" src=""/>	</div>
		
		<script src="../js/jquery.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/app.js"></script>
		<script src="../js/html2canvas.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/canvas2image.js" type="text/javascript" charset="utf-8"></script>
		
		<script>
			window.onload = function(){
				let zname = localStorage.getItem("zname");
				g("zzid").innerHTML = zname;
				
				
				$('#bookname').bind('input propertychange', function() {
				  let val =  $(this).val();
				  //console.log(val)
				  g("smid").innerHTML = val;
				});
				$('#bookjj').bind('input propertychange', function() {
				  	let val =  $(this).val();
				    //console.log(val)
					g("jjid").innerHTML = val;
				});
				
				goaddcent();
				
			}
			
			function getId(id){
				return document.getElementById(id);
			}
			
			
			function goaddcent(){
//					var fdiv = g("fmdivmain1");
					var fdiv = g("fmdivmain");
					
					var width = fdiv.offsetWidth; 
				    var height = fdiv.offsetHeight; 
				    var canvas = document.createElement("canvas"); 
				    var scale = 1.5; 
				    canvas.width = width * scale; 
				    canvas.height = height * scale; 
				    canvas.getContext("2d").scale(scale, scale); 
						
//				    var opts = {
//				        scale: scale, 
//				        canvas: canvas, 
//				        logging: true, 
//				        width: width, 
//				        height: height 
//				    };
			
			   html2canvas(fdiv,{allowTaint:true,taintTest: false,
			   	scale:scale,width: width,  height: height ,
			        onrendered:function(canvas){
				    	console.log(canvas);
		                var base64 = canvas.toDataURL();
		                console.log(base64,"base64");
		                 
		                 $("#down1").css({
				            "width": canvas.width / 2 + "px",
				            "height": canvas.height / 2 + "px",
				        })
		                 $("#down1").attr('src',base64);  
//		                getBase64Image(base64,function(res){
//              			
//              		});
		               
		                  
			        }
			    })
			   

			}
			
		</script>
	</body>

</html>